<template>
	<view class="feedback-page">
		<van-cell-group>
			<van-radio-group :value="type" @change="onChangeType">
			  <van-cell-group>
			    <van-cell title="遇到问题" clickable data-name="1" @click="onClick">
			      <van-radio slot="right-icon" name="1" checked-color="#2BC888" />
			    </van-cell>
			    <van-cell title="使用建议" clickable data-name="2" @click="onClick">
			      <van-radio slot="right-icon" name="2" checked-color="#2BC888" />
			    </van-cell>
			  </van-cell-group>
			</van-radio-group>
			
		  <van-field
		    :value="phone"
		    label="联系方式"
		    placeholder="请输入手机号"
		    :error-message="errMsg"
		    :border="false"
			@input="inputPhone"
			@change="change"
		  />
		  <van-field
		      :value="message"
		      label="问题反馈"
		      type="textarea"
		      placeholder="请输入反馈问题"
		      autosize
		      :border="false"
			  @change="changeMsg"
		    />
		</van-cell-group>
		<view class="logout">
			<van-button color="#2BC888" round  @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from 'vue'
	import { mineServer } from '@/common/index'
	const phone = ref('')
	const message= ref();
	const errMsg = ref(null);
	const changeMsg = ({detail}) => {
		message.value = detail;
	}
	const type = ref("1")
	const onChangeType = ({detail}) => {
		type.value = detail
	}
	const onClick = (e) => {
		console.log(e)
	}
	const inputPhone = ({detail}) => {
		phone.value = detail;
	}
	const change = ({detail}) => {
		const regExpPhone = new RegExp(/^1[3-9]\d{9}$/);
		if(regExpPhone.test(detail)){
			errMsg.value = null;
			
		}else {
			errMsg.value = "手机号不正确"
		}
	}
	const submit = async () =>{
		if(phone.value === ''){
			errMsg.value = "请输入手机号"
			return
		}
		if(errMsg.value !== null){
			return;
		}
		feedbacks();
	}
	
	
	// 意见反馈
	const feedbacks = async () => {
		try{
			const { status, data} = await mineServer.feedbacks({contactInformation:phone.value, content:message.value, type:type.value});
			if(status === '200'){
				uni.showToast({
					icon:"success",
					title:"感谢您的反馈",
					success() {
						uni.navigateBack()
					}
				})
			}
		}catch(e){
			console.log(e)
			//TODO handle the exception
		}
	}
</script>

<style>
</style>

<style  lang="scss">
	// .logout{
	// 	width: 30%;
	// 	height: 80upx;
	// 	color: #fff;
	// 	position:fixed;
	// 	bottom: 100upx;
	// 	margin: 0 auto;
	// }
	
	
	.logout{
		width: calc(100% - 100upx);
		position:fixed;
		bottom: 100upx;
		left: 50upx;
		.van-button{;
			padding:0 50upx;
			width: 100%;
		}
	}
</style>